<template>
  <div class="xunjingwendao">
    <Navbar :activeMenu="currentPath" />
    <div class="main container">
      <div class="lesson_index">
        <div class="swiper-div">
          <div class="carousel-container">
            <el-carousel :interval="4000" arrow="always" height="300px">
              <el-carousel-item
                v-for="(item, index) in swiperList"
                :key="index"
              >
                <img
                  :src="item.coverImage"
                  alt=""
                  style="width: 100%; height: auto"
                />
              </el-carousel-item>
            </el-carousel>
          </div>

          <div class="mylessonAll">
            <span class="title">我的课程</span>
            <div class="list">
              <div class="course-group">
                <div
                  v-if="mylessonTotal > 0"
                  style="display: flex; align-items: center; flex-wrap: wrap"
                >
                  <div
                    v-for="(item, index) in list"
                    :key="index"
                    class="scroll-list"
                    style="flex-direction: row"
                    @click="mylesson(item)"
                  >
                    <div class="course-tab">
                      <img :src="item.courseTypeImage" alt="" />
                      <p class="items">
                        <b>{{ item.courseTypeName }}</b
                        >{{ item.courseTypeDescs }}
                      </p>
                      <!-- 	<div class="study">
											<span>去学习</span>
										</div> -->
                    </div>
                  </div>
                </div>
                <div
                  v-else
                  class=""
                  style="text-align: center; font-size: 28px; color: #ccc"
                >
                  <el-empty
                    description="还没有购买记录哦~去看看喜欢的课程吧"
                  ></el-empty>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { courseTypeList, bannerList, listLockCourse } from "@/api/index";

export default {
  computed: {
    currentPath() {
      return this.$route.path; // 获取当前路由路径
    },
  },
  data() {
    return {
      courseType: "",
      categoryList: [],
      buyItem: "",
      mylessonTotal: 0,
      swiperList: [],
      list: [
        {
          sid: 0,
          src: "自定义src0",
          img: "https://www.leedong.top/3.jpg",
          text: "使得房价来说哦世界的分厘卡士大夫受到法律",
        },
        {
          sid: 1,
          src: "自定义src1",
          img: "https://www.leedong.top/3.jpg",
          text: "使得房价来说哦世界的分厘卡士大夫受到法律",
        },
        {
          sid: 2,
          src: "自定义src2",
          img: "https://www.leedong.top/3.jpg",
          text: "使得房价来说哦世界的分厘卡士大夫受到法律",
        },
        {
          sid: 3,
          src: "自定义src3",
          img: "https://www.leedong.top/3.jpg",
          text: "使得房价来说哦世界的分厘卡士大夫受到法律",
        },
      ],
    };
  },
  methods: {
    getBanner() {
      bannerList({}).then((res) => {
        this.swiperList = res;
      });
    },
    toSwiper(item) {
      if (item.bannerTypeId == 1) {
        uni.navigateTo({
          url:
            "/pages/lesson/list?id=" + item.dataId + "&img=" + item.coverImage,
        });
      } else {
        uni.navigateTo({
          url: "/pages/shop/shopDetails?id=" + item.dataId,
        });
      }
      console.log(item);
    },
    getlistLockCourse() {
      listLockCourse({ userId: "11" }).then((res) => {
        if (res.code != 200) {
          this.$message({
            message: res.msg,
            type: "error",
          });
          return;
        }

        if (res) {
          this.list = res.rows;
          this.mylessonTotal = res.total;
        }
      });
    },
    mylesson(item) {
      let data = {
        id: item.courseId,
        image: item.courseTypeImage,
        courseTypeDescs: item.courseTypeDescs,
        isBuy: 1,
      };
      uni.navigateTo({
        url: "/pages/lesson/list?buyItem=" + JSON.stringify(data),
      });
    },
    jump(item) {
      this.$router.push({
        name: "lessonList",
        query: {
          buyItem: JSON.stringify(item),
        },
      });
    },
    getListTypeLeft() {
      courseTypeList({
        courseType: "1",
      }).then((res) => {
        console.log(res);

        if (res.code == 200) {
          this.categoryList = res.data;

          this.buyItem = res.data[0];
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
  },
  mounted() {
    this.getListTypeLeft();
    this.getBanner();
    this.getlistLockCourse();
  },
};
</script>

<style lang="scss" scoped>
.lesson_index {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;

  .swiper-div {
    .swiper {
      width: 100%;
      height: 350upx;

      image {
        width: 100%;
        height: 350upx;
      }
    }

    .keep-out {
      width: 100%;
      height: 30upx;
      border-radius: 100% 100% 0 0;
      background-color: #ff570a;
      margin-top: -15upx;
      position: absolute;
    }
  }

  .jiaoliu {
    width: 100%;
    background-color: #fff;
    margin: auto;

    .title {
      font-size: 17px;
      font-weight: 800;
      padding: 10px 0;
      display: inline-block;
      background: #fff;
    }

    .list {
      display: flex;
      flex-wrap: wrap;

      .course-group {
        display: flex;

        margin-top: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #f9eded;
        width: 24.5%;
        box-shadow: 0 4px 8px 0 rgba(95, 101, 105, 0.05);
        border-radius: 8px;
        margin-left: 5px;

        .left {
          margin: 5px;
          width: 27%;

          img {
            width: 100%;
            height: 80px;
          }
        }

        .right {
          width: 70%;

          .first {
            font-size: 30upx;
            font-weight: 800;
            padding-top: 5px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
          }

          .content {
            .item {
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: normal;
              color: #545c63;
              line-height: 20px;
              height: 40px;
              margin-bottom: 8px;
              padding: 0 8px;
            }

            .isbuy {
              font-size: 15px;
              color: #9199a1;
              line-height: 18px;
              padding: 0 8px;
            }

            .price {
              display: flex;
              align-items: center;
              margin-left: 7px;
              margin-top: 6px;

              .left_price {
                font-size: 12px;

                line-height: 18px;
                padding: 5px;
                color: #fff;
                background-color: rgba(242, 13, 13, 0.6);
                border-radius: 5px;
              }

              .price_item {
                font-size: 18px;
                color: #ff8342;
                line-height: 18px;
                padding: 0 8px;
              }
            }

            .cishu {
              margin-top: 10px;
            }

            text {
              font-size: 28px;
              color: #ab9a9a;
            }
          }
        }
      }

      .course-group1 {
        display: flex;
        flex-direction: column;
        padding: 10px;

        margin-top: 0;
        border-bottom: none;

        .left {
          margin: 5px;
          width: 98%;

          img {
            width: 100%;
            height: 180px;
          }
        }

        .right {
          width: 97%;
          margin: auto;

          .first {
            font-size: 17px;
          }

          .content {
            .item {
              font-size: 14px;
            }
          }
        }
      }
    }
  }

  .mylessonAll {
    background: #fff;

    margin-top: 10px;

    .title {
      font-size: 17px;
      font-weight: 800;
      padding: 15px 0 0 15px;
      display: inline-block;
      background: #fff;
    }

    .list {
      .course-group {
        margin-top: 10px;

        .scroll-list {
          width: 25%;
          padding: 10px;
          box-shadow: 0 4px 8px 0 rgba(95, 101, 105, 0.05);
          border-radius: 8px;
          height: 214px;

          .course-tab {
            width: 100%;
            height: 150px;

            text-align: center;

            .items {
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: normal;
              color: #545c63;
              line-height: 20px;
              height: 40px;
              margin-bottom: 8px;
              padding: 0 8px;
            }

            img {
              width: 100%;
              height: 100%;
            }

            .study {
              display: inline-block;
              border: 2px solid #ff8342;

              padding: 3px;
              width: 50px;
              height: 20px;
              line-height: 20px;
              text-align: center;
              border-radius: 10px;
              font-size: 28px;
            }
          }
        }
      }
    }
  }
}
</style>